<script setup lang="ts">
import { addJueSeApi, getJueSeWeiHuApi } from '@/api/system'
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type ComponentSize } from 'element-plus'
import { ref, onMounted } from 'vue'
import { usetreeStore } from '@/stores/index'
import addChange from './components/addChange.vue'
import { convertTreeLabel } from '@/utils/publicMethods'
import type Node from 'element-plus/es/components/tree/src/model/node'

const treeStore = usetreeStore()
const ZhuCeloading = ref(true)
const noticeSize = ref<ComponentSize>('default')
const ZhuCeFrom = ref({
  appNameKey: '',
  subCls: '',
  page: 1,
  rows: 20
})
treeStore.getSubClsTree()
const ZhuCeTableData = ref<any>([])
const ZhuCeTotal = ref(0)

const subClsTreeArry = JSON.parse(JSON.stringify(convertTreeLabel(treeStore.appTreeList)))
// 树结构懒加载
const subClsTreeFn = (node: Node, resolve: (data: any[]) => void) => {
  // console.log(node)
  // 树形结构地域
  if (node.level === 0) {
    const info = subClsTreeArry.map((item: any) => {
      return {
        value: item.value,
        label: item.label,
        children: item.children
      }
    })
    return resolve(info)
  }

  if (node.level > 1) {
    if (!node.data.children) {
      return resolve([])
    } else {
      setTimeout(() => {
        const data = node.data.children
        resolve(data)
      }, 100)
    }
  }
  setTimeout(() => {
    const data = node.data.children
    resolve(data)
  }, 100)
}
const getTableData = async () => {
  ZhuCeloading.value = true
  const params = {
    sqlId: 'appInfo.getAppInfo',
    sqlParam: JSON.stringify({
      appNameKey: ZhuCeFrom.value.appNameKey,
      subCls: '' // ZhuCeFrom.value.subCls
    }),
    pagination: true,
    page: ZhuCeFrom.value.page,
    rows: ZhuCeFrom.value.rows
  }
  await getJueSeWeiHuApi(params)
    .then((res: any) => {
      // console.log(res)
      ZhuCeTotal.value = res.total
      ZhuCeTableData.value = res.rows
      ZhuCeloading.value = false
    })
    .catch(() => {
      ElMessage({ message: '数据获取失败', type: 'error' })
    })
}

const SearchBtn = () => {
  ZhuCeFrom.value.page = 1
  getTableData()
}

const indexMethod = (index: number) => {
  return index * 1 + 1
}
const deleteBtn = (row: any) => {
  const params = {
    sqlId: JSON.stringify(['appInfo.deleteAppInfo', 'appInfo.deleteAppClassRela']),
    sqlParam: JSON.stringify({ app_id: row.app_id })
  }
  ElMessageBox.confirm('你确定要删除本应用？', '删除应用', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await addJueSeApi(params)
        .then((res: any) => {
          if (res === 'success') {
            getTableData()
            ElMessage({ message: '删除成功', type: 'success' })
          } else {
            ElMessage({ message: '删除失败', type: 'error' })
          }
        })
        .catch(() => {
          ElMessage({ message: '删除失败', type: 'error' })
        })
    })
    .catch(() => {
      ElMessage({ message: '已取消删除', type: 'info' })
    })
}

const handleSizeChange = (val: number) => {
  ZhuCeFrom.value.page = 1
  ZhuCeFrom.value.rows = val
  getTableData()
}
const handleCurrentChange = (val: number) => {
  ZhuCeFrom.value.page = val
  getTableData()
}

const isShow = ref(false)
const title = ref('新增应用')
const formInfo = ref<any>({})
const addYingYongBtn = () => {
  title.value = '新增应用'
  isShow.value = true
}
const changeBtn = (row: any) => {
  title.value = '修改应用'
  formInfo.value = row
  isShow.value = true
  console.log(row)
}

onMounted(() => {
  getTableData()
})
</script>
<template>
  <div class="zhuceBox">
    <el-form :inline="true" :model="ZhuCeFrom" style="margin-top: 15px">
      <el-form-item label="应用名称：">
        <el-input v-model="ZhuCeFrom.appNameKey" placeholder="请输入应用名称" clearable />
      </el-form-item>
      <el-form-item label="分类目录：">
        <el-tree-select
          lazy
          :load="subClsTreeFn"
          :cache-data="subClsTreeArry"
          v-model="ZhuCeFrom.subCls"
          multiple
          :multiple-limit="1"
          node-key="value"
          :render-after-expand="false"
          style="width: 240px"
          check-strictly
          check-on-click-node
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="SearchBtn">查询</el-button>
        <el-button type="success" plain :icon="Plus" @click="addYingYongBtn">添加应用</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="ZhuCeloading"
      :data="ZhuCeTableData"
      stripe
      border
      class="zhuceTableBox TableBox"
      style="width: 100%"
    >
      <el-table-column type="index" :index="indexMethod" width="50" />
      <el-table-column prop="app_name" label="应用名称" width="180" />
      <el-table-column prop="app_description" label="应用描述" />
      <el-table-column prop="app_url" label="应用地址" />
      <el-table-column prop="creator" label="开发人" width="180" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button text type="primary" @click="changeBtn(scope.row)">修改</el-button>
          <el-button type="danger" text @click="deleteBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="paginationBox"
      v-model:current-page="ZhuCeFrom.page"
      v-model:page-size="ZhuCeFrom.rows"
      :page-sizes="[10, 20, 30, 40]"
      :size="noticeSize"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="ZhuCeTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <addChange
      v-if="isShow"
      v-model:is-show="isShow"
      :title="title"
      :form-info="formInfo"
      @get-ying-yong-tree="getTableData"
    />
  </div>
</template>
<style scoped lang="less">
.zhuceBox {
  height: calc(100vh - 200px);
  position: relative;
  padding: 0 8px;
  .TableBox {
    height: calc(100vh - 270px);
  }
  .zhuceTableBox {
    .el-button {
      padding: 0;
    }
  }
  .paginationBox {
    position: fixed;
    bottom: 20px;
  }
}
</style>
